<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <!-- 设置字符编码为 UTF-8 -->
    <meta charset="UTF-8">
    <!-- 确保页面在移动设备上正确显示 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 设置页面标题 -->
    <title>二手优选 - 二手交易平台</title>
    <!-- 引入外部样式表 -->
    <link rel="stylesheet" href="/static/css/index.css">
    
</head>

<body>
    <!-- 顶部导航栏 -->
    <nav class="top-nav">
        <div class="logo">二手优选</div>
    </nav>
    <!-- 搜索框区域 -->
    <div class="search-bar" style="margin: 24px 0;">
        <form method="get" action="/search" style="display:flex;justify-content:center;">
            <input type="text" name="q" placeholder="搜索二手好物，如：iPhone 13" id="searchInput" aria-label="搜索商品" style="width:400px;padding:10px 16px;border-radius:20px;border:1px solid #ddd;font-size:16px;outline:none;">
            <button type="submit" style="margin-left:10px;padding:10px 24px;border-radius:20px;border:none;background:#2a8cff;color:#fff;font-size:16px;cursor:pointer;">搜索</button>
        </form>
    </div>

    <!-- Banner横幅区域 -->
    <div class="banner">
        <img src="/static/img/品牌词.png" alt="二手好物推荐">
        <div class="banner-text">
            <h1>让闲置物品流动起来</h1>
            <p>安全 · 便捷 · 实惠 · 环保</p>
            <a href="/add" class="btn">发布闲置</a>
        </div>
    </div>

    <!-- 轮播图区域 -->
    <div class="carousel-container">
        <div class="carousel" id="carousel">
            <img src="/static/img/轮播图1.jpg" class="carousel-img active" alt="轮播1">
            <img src="/static/img/轮播图2.jpg" class="carousel-img" alt="轮播2">
            <img src="/static/img/轮播图3.jpg" class="carousel-img" alt="轮播3">
            <button class="carousel-btn prev" onclick="prevSlide()">&#10094;</button>
            <button class="carousel-btn next" onclick="nextSlide()">&#10095;</button>
        </div>
        <div class="carousel-dots" id="carouselDots">
            <span class="dot active" onclick="goToSlide(0)"></span>
            <span class="dot" onclick="goToSlide(1)"></span>
            <span class="dot" onclick="goToSlide(2)"></span>
        </div>
    </div>

    <!-- 分类入口 -->
    <div class="category-icons category-round">
        <div class="category-icon-round" onclick="goToCategory('phone')">
            <div class="icon-bg"><img src="/static/img/限时.png" alt="手机数码"></div>
            <span>手机数码</span>
        </div>
        <div class="category-icon-round" onclick="goToCategory('appliance')">
            <div class="icon-bg"><img src="/static/img/礼品.png" alt="家用电器"></div>
            <span>家用电器</span>
        </div>
        <div class="category-icon-round" onclick="goToCategory('book')">
            <div class="icon-bg"><img src="/static/img/签到.png" alt="图书教材"></div>
            <span>图书教材</span>
        </div>
        <div class="category-icon-round" onclick="goToCategory('sport')">
            <div class="icon-bg"><img src="/static/img/优惠券.png" alt="运动户外"></div>
            <span>运动户外</span>
        </div>
    </div>

    <!-- 商品列表区域 -->
    <div class="product-list">
        <h2>最新发布</h2>
        <div class="products">
            {{range .items}}
            <a href="/item/detail/{{.ID}}" style="text-decoration: none; color: inherit;">
                <div class="product-card">
                    <img src="{{if .Image}}{{.Image}}{{else}}/static/img/default.jpg{{end}}" alt="{{.Title}}">
                    <div class="info">
                        <h3>{{.Title}}</h3>
                        <p>￥{{.Price}}</p>
                        <span>{{.Detail}}</span>
                    </div>
                </div>
            </a>
            {{end}}
        </div>
    </div>

    <!-- 底部导航区域 -->
    <div class="bottom-nav">
        <div class="nav-item" onclick="goToCategory('brand')">
            <img src="/static/img/品牌词.png" alt="品牌专区">
            <span>品牌专区</span>
        </div>
        <div class="nav-item" onclick="location.href='/cart.html'">
            <img src="/static/img/购物车.png" alt="购物车">
            <span>购物车</span>
        </div>
        <div class="nav-item" onclick="location.href='/user/center'">
            <img src="/static/img/用户.png" alt="用户中心">
            <span>我的</span>
        </div>
        <div class="nav-item" onclick="location.href='/user/chat'">
            <img src="/static/img/chat.png" alt="聊天">
            <span>聊天</span>
        </div>
    </div>

    <link rel="stylesheet" href="/static/css/index.css">
    <script src="/static/js/index.js"></script>
    <script>
    function goToCategory(cat) {
        alert('跳转到分类：' + cat);
    }
    function goToCart() {
        alert('跳转到购物车');
    }
    function goToUser() {
        alert('跳转我的');
    }
    function updateProductList(items) {
        const productList = document.querySelector('.products');
        productList.innerHTML = ''; // 清空当前商品列表
        items.forEach(item => {
            const productCard = document.createElement('div');
            productCard.className = 'product-card';
            productCard.innerHTML = `
                <img src="${item.Image || '/static/img/default.jpg'}" alt="${item.Title}">
                <div class="info">
                    <h3>${item.Title}</h3>
                    <p>￥${item.Price}</p>
                    <span>${item.Detail}</span>
                </div>
            `;
            productList.appendChild(productCard);
        });
    }
    </script>
</body>

</html>